<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<title>会员储值汇总</title>
	<!-- Bootstrap -->
	<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
	<link href="fonts/iconfont.css" rel="stylesheet">
	<link href="../assets/css/style.css" rel="stylesheet" />
	<link href="../assets/css/tabletable.css" rel="stylesheet" />
	<link href="../assets/css/imagebox/image_box.css" rel="stylesheet" />
	<link href="css/收银对账.css" rel="stylesheet" />
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		      <script src="../assets/js/html5shiv.min.js"></script>
		      <script src="../assets/js/respond.min.js"></script>
		      <![endif]-->
		      <style type="text/css">
		      	.firstth{
		      		width: 130px !important;
		      	}
		      	.firsttd{
		      		width: 130px !important;
		      	}
		      	.secondta{
		      		padding-left: 145px !important;
		      	}
		      	.border_radius_5{
		      		border-radius: 5px;
		      	}
		      	.fasongxiaoxi{
		      		float: right;
		      		margin-right: 15px;
		      	}
		      	.width150{
		      		width: 150px;
		      	}
		      </style>
		  </head>

		  <body>
		  	<!--内容区域-->
		  	<div class="content">

		  		<!-- 头部的餐厅选择 -->
		  		<div class="content-header col-md-12">
		  			<div class="con-header">
		  				<div class="col-md-12 col-sm-12 col-xs-12">
		  					<span class="content-title-pre"></span>
		  					<span class="content-title-word">会员评价统计</span>
		  				</div>
		  			</div>
		  		</div>
		  		<div class="row"></div>
		  		<!-- botstrop 的内容 -->
		  		<div class="content_serach row">
		  			<input type="text" class="form-control serach_input width150" placeholder="请输入姓名">
		  			<select class="form-control serach_select margin-lf-0 width150">
		  				<option>全部评价</option>
		  				<option>全部评价</option>
		  				<option>全部商家</option>
		  				<option>全部角色</option>
		  				<option>全部角色</option>
		  			</select>
		  			<select class="form-control serach_select margin-lf-0 width150">
		  				<option>全部评价</option>
		  				<option>全部评价</option>
		  				<option>全部商家</option>
		  				<option>全部角色</option>
		  				<option>全部角色</option>
		  			</select>
		  			
		  			<button type="button" class="btn btn-info serach_btn ">搜索&nbsp;&nbsp;<i class="icon iconfont icon-sousuo icon_serach"></i></button>
		  			<button type="button" class="btn btn-info serach_btn excel_btn fasongxiaoxi">下载excel</button>
		  		</div>
		  		<div class="cashier-status mt20">
		  			<div class="cashier-item">
		  				<span class="today dayxuanze">今日</span>
		  				<span class="yesterday">昨日</span>
		  				<span class="month">本月</span>
		  				<span class="upmonth">上月</span>
		  			</div>
		  			<div class="cashier-content today-con">
		  				<div class="content-item">
		  					<span>结算一：金额164.00元</span>
		  					<span>收银时间：2016-11-10 12：37</span>
		  					<span>操作员：徐立新</span>
		  				</div>
		  			</div>
		  			<div class="cashier-content yesterday-con hide">
		  				<div class="content-item">
		  					<span>结算2：金额164.00元</span>
		  					<span>收银时间：2016-11-10 12：37</span>
		  					<span>操作员：徐新</span>
		  				</div>
		  			</div>
		  			<div class="cashier-content  month-con hide">
		  				<div class="content-item">
		  					<span>结算3：金额164.00元</span>
		  					<span>收银时间：2016-11-10 12：37</span>
		  					<span>操作员：徐新历</span>
		  				</div>
		  			</div>
		  			<div class="cashier-content  upmonth-con hide">
		  				<div class="content-item">
		  					<span>结算4：金额164.00元</span>
		  					<span>收银时间：2016-11-10 12：37</span>
		  					<span>操作员：徐新历</span>
		  				</div>
		  			</div>
		  		</div>

		  		<div class="chargetable">
		  			<div class="table-responsive mt20">
		  				<table class="table">
		  					<thead class="tablethead">
		  						<tr>
		  							<th class="firstth" valign="middle">充值</th>
		  							<th class="secondta">会员</th>
		  							<th>门店</th>
		  							<th>评价</th>
		  							<th>评价时间</th>
		  							<th>操作</th>
		  						</tr>
		  					</thead>
		  					<tbody class="mytable">
		  						<tr>
		  							<td class="firsttd" valign="middle">01</td>
		  							<td class="secondta">好好好</td>
		  							<td>地方风风广告</td>
		  							<td>地方风风广告</td>
		  							<td>2016-11-06 21:50:09</td>
		  							<td>查看明细</td>
		  						</tr>
		  						<tr>
		  							<td class="firsttd" valign="middle">01</td>
		  							<td class="secondta">好好好</td>
		  							<td>地方风风广告</td>
		  							<td>地方风风广告</td>
		  							<td>2016-11-06 21:50:09</td>
		  							<td>查看明细</td>
		  						</tr>
		  						<tr>
		  							<td class="firsttd" valign="middle">01</td>
		  							<td class="secondta">好好好</td>
		  							<td>地方风风广告</td>
		  							<td>地方风风广告</td>
		  							<td>2016-11-06 21:50:09</td>
		  							<td>查看明细</td>
		  						</tr>
		  						<tr>
		  							<td class="firsttd" valign="middle">01</td>
		  							<td class="secondta">好好好</td>
		  							<td>地方风风广告</td>
		  							<td>地方风风广告</td>
		  							<td>2016-11-06 21:50:09</td>
		  							<td>查看明细</td>
		  						</tr>
		  					</tbody>
		  				</table>
		  			</div>
		  			<div class="paging col-md-6 col-md-offset-6 col-sm-12 col-xs-12 text-right">
		  				<div class="page-page flr">
		  					<ul class="pagination">
		  						<li class="epage">
		  							<a href="#">上一页</a>
		  						</li>
		  						<li class="active">
		  							<a href="#">1 <span class="sr-only">(current)</span></a>
		  						</li>
		  						<li>
		  							<a href="#">2</a>
		  						</li>
		  						<li>
		  							<a href="#">3</a>
		  						</li>
		  						<!--<li><a href="#">4</a></li>-->
		  						<li>
		  							<a href="#">...</a>
		  						</li>
		  						<li class="epage">
		  							<a href="#">下一页</a>
		  						</li>
		  					</ul>
		  				</div>
		  				<div class="page-num flr">共9页，每页10条</div>
		  			</div>
		  		</div>
		  	</div>
		  	<script src="../assets/js/jquery.min.js"></script>
		  	<script src="../assets/js/bootstrap.min.js"></script>
		  	<script type="text/javascript">
		  		colorStyle();
        	// 给奇数行和偶数行不同的颜色
        	function colorStyle(){
        		$(".mytable").find("tr:even").addClass("oushu");
        		$(".mytable").find("tr:odd").addClass("jishu");
        		$(".mytable").find("tr:odd td:first-child").addClass("jishu");
        	}

	        // 给第一列高度
	        firstTrHeight()
	        function firstTrHeight() {
	        	for(var i = $(".mytable tr").length - 1; i >= 0; i--) {
	        		var trht = $(".mytable tr")[i].offsetHeight
	        		var domtr = $(".mytable tr")[i];
	            // 有30px的边距
	            $(domtr).children('td').height(trht - 30);
	            $(domtr).children('.firsttd').css('line-height', trht - 30 + 'px');
	        };
	    }
	    $(".today").on('click', function() {
	    	$(".today-con").removeClass("hide");
	    	$(".yesterday-con").addClass("hide");
	    	$(".month-con").addClass("hide");
	    	$(this).addClass("dayxuanze");
	    	$('.yesterday').removeClass("dayxuanze");
	    	$('.month').removeClass("dayxuanze")
	    	$('.upmonth-con').addClass("hide");
	    	$('.upmonth').removeClass('dayxuanze')
	    })
	    $(".yesterday").on('click', function() {
	    	$(".today-con").addClass("hide");
	    	$(".month-con").addClass("hide");
	    	$(".yesterday-con").removeClass('hide');
	    	$(this).addClass("dayxuanze");
	    	$('.today').removeClass("dayxuanze");
	    	$('.month').removeClass("dayxuanze")
	    	$('.upmonth-con').addClass("hide");
	    	$('.upmonth').removeClass('dayxuanze')
	    })
	    $(".month").on('click', function() {
	    	$(".today-con").addClass("hide");
	    	$(".month-con").removeClass("hide");
	    	$(".yesterday-con").addClass('hide');
	    	$(this).addClass("dayxuanze");
	    	$('.today').removeClass("dayxuanze");
	    	$('.yesterday').removeClass("dayxuanze")
	    	$('.upmonth-con').addClass("hide");
	    	$('.upmonth').removeClass('dayxuanze')
	    })
	    $(".upmonth").on('click', function() {
	    	$(".today-con").addClass("hide");
	    	$(".upmonth-con").removeClass("hide");
	    	$(".yesterday-con").addClass('hide');
	    	$(this).addClass("dayxuanze");
	    	$('.today').removeClass("dayxuanze");
	    	$('.yesterday').removeClass("dayxuanze")
	    	$('.month-con').addClass("hide");
	    	$('.month').removeClass('dayxuanze')
	    })
	</script>
</body>

</html>